<template>
	<view>
		<chat v-show="tabbar[current].ref=='chat'" ref="chat"></chat>
		<friend v-show="tabbar[current].ref=='friend'" ref="friend"></friend>
		<!-- <find v-show="tabbar[current].ref=='find'" ref="find"></find> -->
		<my v-show="tabbar[current].ref=='my'" ref="my"></my>
		<u-tabbar 
			:value="current" 
			height="100" 
			:list="tabbar"  
			:active-color="themeColor.hex" 
			inactive-color="#707070" 
			@change="NavChange"
		></u-tabbar>

		<!-- #ifdef APP-PLUS -->
		<updatepage ref="updatepage"/>
		<!-- #endif -->
		<view style="display: none;">
			{{unreadCount}}
		</view>
	</view>
</template>

<script>
	import chat from "@/pages/chat/list.vue"
	import friend from "@/pages/friend/list.vue"
	import my from "@/pages/my/my.vue"
	import find from '@/pages/find/index.vue'
	// #ifdef APP-PLUS
	import updatepage from "@/components/updatepage.vue"
	// #endif
	import {mapGetters,mapMutations} from "vuex"
	import { jumpTo } from "@/utils/util"
	export default {
		components:{
			chat,
			friend,
			my,
			find,
			// #ifdef APP-PLUS
			updatepage
			// #endif
		},
		data() {
			return {
				current: 0,
				scrollArr:[0,0,0,0,0]
			}
		},
		computed:{
			...mapGetters(['unreadCount']),
			...mapGetters('system',['tabbar'])
		},
		onLoad({cur=0}) {
			this.current = Number(cur)
			this.resetTabbar()
			uni.$on('switchTab',this.NavChange)
		},
		onUnload() {
			uni.$off('switchTab',this.NavChange)
		},
		onReady() {
			const curItem = this.tabbar[this.current];
			const nowPage = this.$refs[curItem.ref];
			nowPage.load&&nowPage.load()
			curItem.load = true;
			// #ifdef APP-PLUS
			const upRef = this.$refs.updatepage
			upRef.check().then(({needUp,lastVersion})=>{
				console.log(needUp,lastVersion)
				if(!needUp){
					return
				}
				upRef.upgrade();
				if(lastVersion.updateType==2){
					upRef.upgradeEvent()
				}
			})
			// #endif
		},
		async onShow() {
			const curItem = this.tabbar[this.current];
			const nowPage = this.$refs[curItem.ref];
			if (!!nowPage && !!nowPage.show) {
				await nowPage.show();
			}
		},
		async onHide() {
			const curItem = this.tabbar[this.current];
			const nowPage = this.$refs[curItem.ref];
			if (!!nowPage.hide) {
				await nowPage.hide();
			}
		},
		async onReachBottom() {
			const curItem = this.tabbar[this.current];
			const nowPage = this.$refs[curItem.ref];
			if (!!nowPage.reachBottom) {
				await nowPage.reachBottom();
			}
		},
		async onPullDownRefresh() {
			try {
				const curItem = this.tabbar[this.current];
				const nowPage = this.$refs[curItem.ref];
				if (!!nowPage.pullDownRefresh) {
					await nowPage.pullDownRefresh();
				}
			} finally {
				uni.stopPullDownRefresh()
			}
		},
		onShareAppMessage(e) {
			const curItem = this.tabbar[this.current];
			const nowPage = this.$refs[curItem.ref];
			if(nowPage.shareAppMessage){
				return nowPage.shareAppMessage(e)
			}
		},
		onPageScroll(e) {
			const curItem = this.tabbar[this.current];
			const nowPage = this.$refs[curItem.ref];
			nowPage &&nowPage.pageScroll&&nowPage.pageScroll(e)
			this.scrollArr[this.current] = e.scrollTop;
		},
		methods: {
			...mapMutations('system',['resetTabbar']),
			NavChange(target) {
				if(target==this.current){
					return;
				}
				
				const curItem = this.tabbar[this.current];
				const nextItem = this.tabbar[target];
				if(nextItem.ref=='faxian'){
					return jumpTo(nextItem.href,2)
				}
				const nowPage = this.$refs[curItem.ref];
				const nextPage = this.$refs[nextItem.ref];
				if(!nextItem.load){
					nextPage.load&&nextPage.load();
					nextItem.load = true;
				}
				if (!!nowPage.hide) {
					nowPage.hide();
				}
				this.current = target;
				if (!!nextPage.show) {
					nextPage.show();
				}
				this.$nextTick(()=>{
					uni.pageScrollTo({
						duration:0,
						scrollTop:this.scrollArr[target]
					})
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
